<template>
  <div class="task-list">
    <h1>任务管理</h1>
    <div class="filter-bar">
      <input 
        type="text" 
        v-model="assigneeFilter"
        placeholder="按办理人筛选"
        class="filter-input"
      />
      <button @click="fetchTasks" class="btn">刷新</button>
    </div>
    <table class="task-table">
      <thead>
        <tr>
          <th>任务ID</th>
          <th>任务名称</th>
          <th>流程实例ID</th>
          <th>办理人</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>{{ task.id }}</td>
          <td>{{ task.name }}</td>
          <td>{{ task.processInstanceId }}</td>
          <td>{{ task.assignee || '未分配' }}</td>
          <td>{{ formatDate(task.createTime) }}</td>
          <td>
            <button @click="completeTask(task.id)" class="btn btn-primary">完成</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { workflowService } from '../api/workflowService';

const tasks = ref([]);
const assigneeFilter = ref('');

onMounted(() => {
  fetchTasks();
});

const fetchTasks = async () => {
  try {
    const data = await workflowService.getTasks(assigneeFilter.value || null);
    tasks.value = data;
  } catch (error) {
    console.error('获取任务列表失败:', error);
    alert('获取任务列表失败，请重试。');
  }
};

const completeTask = async (taskId) => {
  try {
    await workflowService.completeTask(taskId, {});
    alert('任务完成成功！');
    fetchTasks(); // 刷新任务列表
  } catch (error) {
    console.error('完成任务失败:', error);
    alert('完成任务失败，请重试。');
  }
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).format(date);
};
</script>

<style scoped>
.task-list {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #f0f0f0;
}

.btn-primary {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.btn-primary:hover {
  background-color: #35495e;
  border-color: #35495e;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
}

.task-table th,
.task-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.task-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.task-table tr:hover {
  background-color: #f9f9f9;
}
</style>